<template>
  <div>
    <van-form @submit="onSubmit">
        <van-field
            v-model="userdata.email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <van-field
            v-model="userdata.password"
            name="password"
            label="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field 
            name="faceimage" 
            label="头像上传" 
            :rules="[{ required: true, message: '上传头像' }]"
        >
            <template v-slot:input>
                <van-uploader v-model="fileList" :after-read="afterReadHandle" :max-count="1" />
            </template>
        </van-field>
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">注册</van-button>
        </div>
    </van-form>
  </div>
</template>

<script>
import {updateFaceImage, registry} from "@/api"
export default {
    data(){
        return {
            userdata:{
                email:'',
                password:'',
                faceimage:"",
            },
            fileList:[]
        }
    },
    methods:{
        onSubmit(){
            if(this.userdata.faceimage){
                // 发接口请求
                registry(this.userdata).then(res => {
                    this.$router.push('/login');
                })
            }
        },
        afterReadHandle({file}){
            const oFormData = new FormData();
            oFormData.append('file',file);
            updateFaceImage(oFormData).then(res => {
                this.userdata.faceimage = res.data.url;
                this.fileList = [
                    {
                        url: res.data.url
                    }
                ]
            })
        }
    }
}
</script>

<style>

</style>